<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Gnatoo</title>

<link href="style.css" rel="stylesheet" type="text/css" />
	
<link href="jslibraries/jquery/css/smoothness/jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css" />

<link href="css/examples/tables/bluetablesorter/style.css"
	rel="stylesheet" type="text/css" />
<link href="css/examples/tabs/simple.css" rel="stylesheet" type="text/css" />
<link href="css/examples/trees/simple.css"
	rel="stylesheet" type="text/css" />

<script type="text/javascript" src="jslibraries/jquery/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery.layout.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery.simplemodal-1.4.1.js"></script>

<script type="text/javascript" src="gnatoo/gnatoo.js"></script>

<script type="text/javascript" src="jslibraries/data/BaseListDataProvider.js"></script>
<script type="text/javascript" src="jslibraries/data/TreeDataProvider.js"></script>

</head>

<body>
<form>

<script type="text/javascript">
var Text = {	
	firstName : 'Bob',
	lastName: 'Smith',

	finish : function() {
			// do something....
	},

	clear : function() {
		this.firstName = '';
		this.lastName = '';
	}
};
</script>
<div id="Text" >
<script type="text/html">
<div>
	<div><b>First name : </b><input type="text" value="#{.Text.firstName}"></input></div>
	<div><b>First name : </b><span>#{.Text.firstName}</span></div>
	<br />

	<div><b>Last name : </b><input type="text" value="#{.Text.lastName}"></input></div>
	<div><b>Last name : </b><span>#{.Text.lastName}</span></div>
 	<br />

	<div>
		<button onclick="#{.Text.finish()}" type="button">Submit</button>
		<button onclick="#{.Text.clear()}" type="button">Clear</button>
	</div>
 
</div>
</script>
</div>
<script>
$(document).ready( function() { 
	// init context
	var gnatooContext = window.gnatoo.initByName('Text'); 
	// bind model
	gnatooContext.data['Text'] = Text;
	// render
	gnatooContext.render();
});
</script>


<!-- <jsp:include page="tutorials/Tables/Treetable/Treetable.html"
	flush="false"></jsp:include>
 -->

</form>
<pre id="mylog" style="font-size: 1.0em; display : block"></pre>
</body>
</html>


